<account-topbar theme="light"></account-topbar>
<div class="box">
  <div class="box-banner">
    <h1>厦门雅瑞光学有限公司</h1>
    <div style="max-width: 420px !important;">
      厦门雅瑞光学有限公司成立于2009年，总部位于中国厦门，旗下拥有‘BOLON’，‘MOLSION’，‘PROSUN’，‘QINA’四大品牌，是一家集眼镜及零配件
      开发设计、生产加工、品牌营销为一体的中外合资企业。公司现有员工1000多人，全国4万余家销售网点，覆盖32个省、自治区、直辖市及香港特别行政
      区，并成功开拓国际市场。
    </div>
  </div>
  <div class="box-login login">
    <div class="login__wrap">
      <ng-container *ngIf="type === 'user'">
        <h2 class="login__title">{{ 'account.login.user.title' | i18n }}</h2>
        <div class="login__type ant-popover-placement-left">
          <div class="ant-popover-content login__type-tip">
            <i class="ant-popover-arrow"></i>
            <div class="ant-popover-inner">手机号登录</div>
          </div>
          <i nz-icon nzType="mobile" class="login__type-icon" (click)="type = 'qr'"></i>
        </div>
        <div class="mt-md">
          <form nz-form #f="ngForm" nzLayout="vertical" [formGroup]="form" (ngSubmit)="submit()" role="form">
            <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
            <div class="mt-md">
              <input formControlName="username" nz-input nzSize="large" autocomplete="off"
                [placeholder]="'account.login.user.username' | i18n" />
            </div>
            <div class="mt-md">
              <input nz-input type="password" nzSize="large" autocomplete="off" formControlName="password"
                [placeholder]="'account.login.user.password' | i18n" />
            </div>
            <div class="mt-md">

              <div nz-row [nzGutter]="8">
                <div nz-col [nzSpan]="12">
                  <input formControlName="code" nz-input nzSize="large" autocomplete="off"
                    [placeholder]="'account.login.user.captcha' | i18n" />
                </div>
                <div nz-col [nzSpan]="10">
                  <img style="cursor: pointer" (click)='refreshCode()' [src]="codeUrl">
                </div>
              </div>

            </div>
            <div class="mt-md">
              <button nz-button nzType="primary" nzSize="large" nzBlock type="submit" [disabled]="f.invalid"
                [nzLoading]="loading">
                {{ 'account.login.user.login' | i18n }}
              </button>
            </div>
          </form>
        </div>
        <!-- <div class="mt-lg text-right">
          <a routerLink="/account/forget" class="mr-md">{{ 'account.login.user.forget' | i18n }}</a>
        </div> -->
        <div class="mt-lg " style="width: 100%;">
          <span class="user-other" style="display: inline;">
            {{ 'account.login.user.sign-in-with' | i18n }}
            <a (click)="t()" nz-tooltip nzTooltipTitle="钉钉"><i nz-icon nzType="dingtalk-circle" nzTheme="fill"></i></a>
            <!-- <a (click)="t()"><i nz-icon nzType="taobao-circle"></i></a>
            <a (click)="t()"><i nz-icon nzType="weibo-circle"></i></a> -->
          </span>
          <span style="float: right;">
            <a routerLink="/account/forget" class="mr-md">{{ 'account.login.user.forget' | i18n }}</a>
          </span>
        </div>
      </ng-container>
      <ng-container *ngIf="type === 'qr'">
        <h2 class="login__title">手机号登录</h2>
        <div class="login__type ant-popover-placement-left">
          <div class="ant-popover-content login__type-tip">
            <i class="ant-popover-arrow"></i>
            <div class="ant-popover-inner">{{ 'account.login.user.title' | i18n }}</div>
          </div>
          <i nz-icon nzType="desktop" class="login__type-icon" (click)="type = 'user'"></i>
        </div>
        <div class="login__qr">
          <form nz-form #f="ngForm" nzLayout="vertical" [formGroup]="form2" (ngSubmit)="submit2()" role="form">
            <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
            <div class="mt-md">
              <input formControlName="mobile" nz-input nzSize="large" autocomplete="off" [placeholder]="'手机号'" />
            </div>
            <div class="mt-md">
              <div nz-row [nzGutter]="8">
                <div nz-col [nzSpan]="12">
                  <input nz-input type="text" nzSize="large" autocomplete="off" formControlName="captcha"
                    [placeholder]="'验证码'" />
                </div>
                <div nz-col [nzSpan]="10">
                  <captcha-btn [disabled]="!form2.value.mobile" [size]="'large'" (send)="sendCaptcha($event)">
                  </captcha-btn>
                </div>
              </div>

            </div>
            <div class="mt-md">
              <button nz-button nzType="primary" nzSize="large" nzBlock type="submit" [disabled]="f.invalid"
                [nzLoading]="loading">
                {{ 'account.login.user.login' | i18n }}
              </button>
            </div>
          </form>
        </div>
      </ng-container>
    </div>
  </div>
</div>
